import React from 'react'

import style from './index.css'

class ImgBox extends React.Component {
    constructor (props) {
        super()
        this.currentImageSrc = props.src

        this.state = {
            imageStyle: {
                width: '100%',
                height: '100%'
            }
        }

        this.containerWidth = 1
        this.containerHeight = 1

        this.imageWidth = 1
        this.imageHeight = 1

        this.containerRef = React.createRef()
        this.bigListenerRef = React.createRef()
        this.smallListenerRef = React.createRef()

        this.loadImageInfo()
    }

    componentDidMount () {
        //初始化位置
        let bigListener = this.bigListenerRef.current
        bigListener.scrollTop = 1e10
        bigListener.scrollLeft = 1e10

        let smallListener = this.smallListenerRef.current
        smallListener.scrollTop = 1e10
        smallListener.scrollLeft = 1e10
        
        this.updateImageStyle()
    }

    componentDidUpdate () {
        if (this.props.src !== this.currentImageSrc) {
            this.currentImageSrc = this.props.src
            this.loadImageInfo()
        }
    }

    // 加载图片信息
    loadImageInfo () {
        const image = document.createElement('img')
        image.src = this.currentImageSrc

        // 兼容IE 不放入dom无法获取的BUG
        image.style.position = 'absolute'
        image.style.opacity = '0'
        image.style.pointerEvents = 'none'
        document.body.appendChild(image)

        image.onload = _ => {
            if (image.src === this.currentImageSrc) {
                this.imageWidth = image.width
                this.imageHeight = image.height
                this.updateImageStyle()
            }
            document.body.removeChild(image)
        }
    }

    // 更新图片信息
    updateImageStyle () {
        const container = this.containerRef.current
        if (!container) return
        const { width, height } = container.getBoundingClientRect()

        const imageP = this.imageHeight / this.imageWidth
        const containerP = height / width

        // let imageStyle = {
        //     width: "100%",
        //     height: "100%",
        //     objectFit: "contain"
        // }
        // 两边有空白
        if (imageP > containerP) {
            imageStyle = {
                height: '100%'
            }
        } else { // 上下有空白
            imageStyle = {
                width: '100%'
            }
        }

        this.setState({
            imageStyle
        })
    }

    resizeBig = e => {
        let smallListener = this.smallListenerRef.current
        smallListener.scrollTop = 1e10
        smallListener.scrollLeft = 1e10
        this.updateImageStyle()
    }

    resizeSmall = e => {
        let bigListener = this.bigListenerRef.current
        bigListener.scrollTop = 1e10
        bigListener.scrollLeft = 1e10
        this.updateImageStyle()
    }

    render () {
        const currentImageSrc = this.currentImageSrc
        const imageStyle = this.state.imageStyle

        return (
            <div ref={this.containerRef} {...this.props}>
                {/* 监听放大 */}
                <div ref={this.bigListenerRef} className={style.autoresizeResizeEventHelper} onScroll={this.resizeBig}>
                    <div className={style.bigContent} />
                </div>
                {/* 监听缩小 */}
                <div ref={this.smallListenerRef} className={style.autoresizeResizeEventHelper} onScroll={this.resizeSmall}>
                    <div className={style.smallContent} />
                </div>
                <img className={style.image} src={currentImageSrc} style={imageStyle} />
            </div>
        )
    }
}

export { ImgBox }
